<div class="section">
    <div class="header">
        <i class="theme-icon"></i>
        Appearance
    </div>

    <div class="row">
        <div class="col">
            <div class="sub-header">Theme</div>
            <div class="body">
                <div class="form-check">
                    <input id="theme-light"
                           name="theme"
                           class="form-check-input"
                           type="radio"
                           model.bind="'Light'"
                           checked.bind="settings.appearance.theme">
                    <label class="form-check-label" for="theme-light">
                        Light
                    </label>
                </div>
                <div class="form-check">
                    <input id="theme-dark"
                           name="theme"
                           class="form-check-input"
                           type="radio"
                           model.bind="'Dark'"
                           checked.bind="settings.appearance.theme">
                    <label class="form-check-label" for="theme-dark">
                        Dark
                    </label>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="sub-header">Icon Theme</div>
            <div class="body">
                <div class="form-check">
                    <input id="icon-theme-default"
                           name="icon-theme"
                           class="form-check-input"
                           type="radio"
                           model.bind="'Default'"
                           checked.bind="settings.appearance.iconTheme">
                    <label class="form-check-label d-flex" for="icon-theme-default">
                        <span style="width: 50px">Default</span>
                        <div class="d-flex ms-5 uncolored-icons" style="gap: 0.75rem">
                            <i class="output-icon"></i>
                            <i class="explorer-icon"></i>
                            <i class="tree-expand-all-icon"></i>
                        </div>
                    </label>
                </div>
                <div class="form-check">
                    <input id="icon-theme-colorful"
                           name="icon-theme"
                           class="form-check-input"
                           type="radio"
                           model.bind="'Colorful'"
                           checked.bind="settings.appearance.iconTheme">
                    <label class="form-check-label d-flex" for="icon-theme-colorful">
                        <span style="width: 50px">Colorful</span>
                        <div class="d-flex ms-5 colored-icons" style="gap: 0.75rem">
                            <i class="output-icon"></i>
                            <i class="explorer-icon"></i>
                            <i class="tree-expand-all-icon"></i>
                        </div>
                    </label>
                </div>
            </div>
        </div>
        <div class="col"></div>
    </div>

    <div class="row" shells="!browser">
        <div class="col">
            <div class="sub-header">
                Titlebar
                <small show.bind="settings.appearance.titlebar.type !== currentSettings.appearance.titlebar.type"
                       class="text-warning">(Restart Required)</small>
            </div>
            <div class="body">
                <div class="form-check">
                    <input id="titlebar-integrated"
                           name="titlebarType"
                           class="form-check-input"
                           type="radio"
                           model.bind="'Integrated'"
                           checked.bind="settings.appearance.titlebar.type">
                    <label class="form-check-label" for="titlebar-integrated">
                        Integrated
                    </label>
                </div>
                <div class="form-check">
                    <input id="titlebar-native"
                           name="titlebarType"
                           class="form-check-input"
                           type="radio"
                           model.bind="'Native'"
                           checked.bind="settings.appearance.titlebar.type">
                    <label class="form-check-label" for="titlebar-native">
                        Native
                    </label>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="sub-header">
                Main Menu
                <small class="text-warning"
                       show.bind="settings.appearance.titlebar.mainMenuVisibility !== currentSettings.appearance.titlebar.mainMenuVisibility && currentSettings.appearance.titlebar.type === 'Native'">
                    (Restart Required)
                </small>
            </div>
            <div class="body">
                <div class="form-check">
                    <input id="main-menu-always-visible"
                           name="mainMenuVisibility"
                           class="form-check-input"
                           type="radio"
                           model.bind="'AlwaysVisible'"
                           checked.bind="settings.appearance.titlebar.mainMenuVisibility">
                    <label class="form-check-label" for="main-menu-always-visible">
                        Always Show
                    </label>
                </div>
                <div class="form-check">
                    <input id="main-menu-auto-hidden"
                           name="mainMenuVisibility"
                           class="form-check-input"
                           type="radio"
                           model.bind="'AutoHidden'"
                           checked.bind="settings.appearance.titlebar.mainMenuVisibility">
                    <label class="form-check-label" for="main-menu-auto-hidden">
                        Auto-Hide <br><small>(Native: press ALT to show)</small>
                    </label>
                </div>
            </div>
        </div>
        <div class="col" if.bind="settings.appearance.titlebar.type === 'Integrated'">
            <div class="sub-header">
                Window Controls
                <i class="info-icon" style="color: dodgerblue" title="Where the window close, maximize and minimize buttons are located.
Only applicable when using the Integrated titlebar."></i>
            </div>
            <div class="body">
                <div class="form-check">
                    <input id="window-controls-position-right"
                           name="windowControlsPosition"
                           class="form-check-input"
                           type="radio"
                           model.bind="'Right'"
                           checked.bind="settings.appearance.titlebar.windowControlsPosition">
                    <label class="form-check-label" for="window-controls-position-right">
                        Right
                    </label>
                </div>
                <div class="form-check">
                    <input id="window-controls-position-left"
                           name="windowControlsPosition"
                           class="form-check-input"
                           type="radio"
                           model.bind="'Left'"
                           checked.bind="settings.appearance.titlebar.windowControlsPosition">
                    <label class="form-check-label" for="window-controls-position-left">
                        Left
                    </label>
                </div>
            </div>
        </div>
        <div class="col" else></div>
    </div>

    <div class="row">
        <div class="col">
            <div class="sub-header">Indicators</div>
            <div class="body">
                <div class="form-check"
                title="Shows a colored indicator in the editor tab reflecting the current status of the script.">
                    <input id="showScriptRunStatusIndicatorInTab"
                           class="form-check-input"
                           type="checkbox"
                           checked.bind="settings.appearance.showScriptRunStatusIndicatorInTab">
                    <label class="form-check-label" for="showScriptRunStatusIndicatorInTab">
                        Show run status indicator in tab
                    </label>
                </div>
                <div class="form-check"
                title="Shows an indicator in the Explorer next to the script reflecting the current status of the script.">
                    <input id="showScriptRunStatusIndicatorInScriptsList"
                           class="form-check-input"
                           type="checkbox"
                           checked.bind="settings.appearance.showScriptRunStatusIndicatorInScriptsList">
                    <label class="form-check-label" for="showScriptRunStatusIndicatorInScriptsList">
                        Show run status indicator in Explorer
                    </label>
                </div>
                <div class="form-check">
                    <input id="showScriptRunningIndicatorInScriptsList"
                           class="form-check-input"
                           type="checkbox"
                           checked.bind="settings.appearance.showScriptRunningIndicatorInScriptsList">
                    <label class="form-check-label" for="showScriptRunningIndicatorInScriptsList">
                        Show indicator in Explorer when script is running
                    </label>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="section">
    <div class="header">
        <i class="folder-icon text-yellow"></i>
        Folders
    </div>

    <div class="body">
        <div class="mb-3 row">
            <label class="col-12 col-md-2 col-form-label fw-bold">.NET SDK</label>
            <div class="col-10 col-md-8">
                <input type="text"
                       class="form-control"
                       value.bind="settings.dotNetSdkDirectoryPath"
                       placeholder="Keep empty to automatically locate .NET SDK directory (Restart required)"
                       spellcheck="false">
            </div>
            <div class="col-2 col-md-2 text-end">
                <button class="btn btn-secondary"
                        show.bind="settings.dotNetSdkDirectoryPath != currentSettings.dotNetSdkDirectoryPath"
                        click.trigger="settings.dotNetSdkDirectoryPath = currentSettings.dotNetSdkDirectoryPath">
                    Undo
                </button>
            </div>
        </div>

        <div class="mb-3 row">
            <label class="col-12 col-md-2 col-form-label fw-bold">Scripts</label>
            <div class="col-10 col-md-8">
                <input type="text" class="form-control" value.bind="settings.scriptsDirectoryPath" spellcheck="false">
            </div>
            <div class="col-2 col-md-2 text-end">
                <button class="btn btn-secondary"
                        show.bind="settings.scriptsDirectoryPath != currentSettings.scriptsDirectoryPath"
                        click.trigger="settings.scriptsDirectoryPath = currentSettings.scriptsDirectoryPath">
                    Undo
                </button>
            </div>
        </div>

        <div class="mb-3 row">
            <label class="col-12 col-md-2 col-form-label fw-bold">Package Cache</label>
            <div class="col-10 col-md-8">
                <input type="text" class="form-control" value.bind="settings.packageCacheDirectoryPath" spellcheck="false">
            </div>
            <div class="col-2 col-md-2 text-end">
                <button class="btn btn-secondary"
                        show.bind="settings.packageCacheDirectoryPath != currentSettings.packageCacheDirectoryPath"
                        click.trigger="settings.packageCacheDirectoryPath = currentSettings.packageCacheDirectoryPath">
                    Undo
                </button>
            </div>
        </div>
    </div>
</div>

<div class="section">
    <div class="header">
        <i class="cloud-icon"></i>
        Updates
    </div>

    <div class="body">
        <div class="form-check">
            <input id="checkUpdatesOnStartup"
                   class="form-check-input"
                   type="checkbox"
                   checked.bind="settings.autoCheckUpdates">
            <label class="form-check-label" for="checkUpdatesOnStartup">
                Check for updates on startup
            </label>
        </div>
    </div>
</div>
